<%--
  Created by IntelliJ IDEA.
  User: 王永超
  Date: 2021/7/14
  Time: 11:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js" ></script>
    <title>Document</title>
    <style type="text/css">
        .divright{
            float:right;
            width:170px;
            height:420px;
            border:1px solid #060;
            margin: 10px 5px 10px 5px;
        }

        .talk_label{

            width:690px;
            height:25px;
            border:1px solid #666;
            background:#fff;
            margin:10px 5px 10px 5px;
            overflow:auto;
        }

        .talk_con{
            width:700px;
            height:550px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }

        .talk_show{
            float:left;
            width:500px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px 5px 10px 5px;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }

        .s_talk{
            margin:10px;
        }
        .s_talk span{
            display:inline-block;
            background: #ffffff;
            border-radius:10px;
            color: #000000;
            padding:5px 10px;
        }
        /**/
        .atalk{
            margin:10px;
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    var ws;
    var ws_url = "ws://localhost:8080/chatroom";
    $(function (){
       ws_connectiom();
       $("#send").click(function (){
          ws_sendMsg();
       });

    });
    function ws_connectiom(){
        var loginUser = "${sessionScope.loginName}";

        if ('WebSocket' in window) {
            ws = new WebSocket(ws_url+"?loginName="+loginUser);
        } else if ('MozWebSocket' in window) {
            ws = new MozWebSocket(ws_url+"?loginName="+loginUser);
        } else {
            console.log('Error: WebSocket is not supported by this browser.');
            return;
        }

        ws.onopen = function () {
            console.log('Info: WebSocket connection opened.');
        };

        ws.onclose = function () {
            console.log('Info: WebSocket closed.');
            alert("已关闭连接");
        };

        ws.onmessage = function (message) {
            console.log(message.data);

            var receiveMsg = message.data;
            var obj=JSON.parse(receiveMsg);
            if(obj.type=="s")//系统信息
            {
                $("#words").append("<div class='s_talk' style='text-align:center;'><span>"+obj.msgDateStr+"&nbsp;"+obj.msgInfo+"</span></div>")
                var Userhtml = "";
                var userList = obj.userList;
                for(var i = 0; i < userList.length;i++){
                    Userhtml=Userhtml+userList[i]+"<br/><br/>"
                }
                $("#userList").html(Userhtml);
            }else if(obj.type=="p")//用户信息
            {
                if(obj.msgSender=="${sessionScope.loginName}"){
                    $("#words").append("<div class='btalk'><span>"+obj.msgSender+"&nbsp;"+obj.msgDateStr+"<br>"+obj.msgInfo+"</span></div>")
                }else{
                    $("#words").append("<div class='atalk'><span>"+obj.msgSender+"&nbsp;"+obj.msgDateStr+"<br>"+obj.msgInfo+"</span></div>")
                }

            }else{
                //扩展
            }

        };

    };
    function ws_sendMsg(){
        var msg = $("#mgs").val();
        if(msg == ""){
            alert("消息不能为空");
            return;
        }
        ws.send(msg);
        msg =  $("#mgs").val("");

    };
</script>


<div class="talk_con">
    <div class="talk_label" style="text-align:center">
        <label>欢迎 【${sessionScope.loginName}】 来到WebSocket公共聊天室</label>
    </div>
    <div class="talk_show" id="words">

    </div>
    <div class="divright" id="userList">

    </div>
    <div class="talk_input">
        <input type="text" class="talk_word" id="mgs">
        <input type="button" value="发送" class="talk_sub" id="send">
    </div>
</div>
</body>
</html>
